import {BrowserRouter, Navigate, Route, Routes} from 'react-router-dom'
import Login from "./components/start/login"
import Start from "./components/start/start"
import Register from "./components/start/register"
import Backstage from "./components/backstage"
import BackstageHome from "./components/backstage/content/home"
import NoMatch from "./components/backstage/content/no-match"
import {Suspense, useCallback, useState} from "react"
import routeMap from "./components/backstage/route-map"
import Mall from "./components/mall"
import MallHome from "./components/mall/content/home"
import Category from "./components/mall/content/category"
import Cart from "./components/mall/content/cart"
import User from "./components/mall/content/user"
import Item from "./components/purchase/item"
import Purchase from "./components/purchase"
import CreateOrder from "./components/purchase/create-order"
import Pay from "./components/purchase/pay"
import PayResult from "./components/purchase/pay-result"
import OrderDetail from "./components/purchase/order-detail"
import Setting from "./components/mall/content/setting";

function lazyLoad(name) {
    const Element = routeMap[name]
    if (!Element) return null
    return (
        <Suspense>
            <Element/>
        </Suspense>
    )
}

function App() {
    let [routes, setRoutes] = useState([])
    const onUpdateMenu = useCallback((menu) => {
        const routes = []
        function loadMenu(items, parentPath) {
            for (const item of items) {
                const path = parentPath ? `${parentPath}/${item.name}` : item.name
                const element = lazyLoad(item.name)
                if (element) {
                    routes.push(<Route key={routes.length} path={path} element={element}/>)
                }
                if (item.children) {
                    loadMenu(item.children, path)
                }
            }
        }
        loadMenu(menu)
        setRoutes(routes)
    }, [])

    return (
        <BrowserRouter>
            <Routes>
                <Route index element={<Navigate replace to="/start/login"/>}/>
                <Route path="start" element={<Start/>}>
                    <Route path="login" element={<Login/>}/>
                    <Route path="register" element={<Register/>}/>
                </Route>
                <Route path="mall" element={<Mall/>}>
                    <Route path="home" element={<MallHome />}/>
                    <Route path="category" element={<Category />}/>
                    <Route path="cart" element={<Cart />}/>
                    <Route path="setting" element={<Setting />}/>
                    <Route path="user" element={<User />}/>
                </Route>
                <Route path="item/:itemId" element={<Item/>}/>
                <Route path="purchase" element={<Purchase/>}>
                    <Route path="create-order" element={<CreateOrder/>}/>
                    <Route path="pay" element={<Pay/>}/>
                    <Route path="pay-result" element={<PayResult/>}/>
                    <Route path="order-detail" element={<OrderDetail/>}/>
                </Route>
                <Route path="backstage" element={<Backstage onUpdateMenu={onUpdateMenu}/>}>
                    <Route path="home" element={<BackstageHome/>}/>
                    <Route path="*" element={<NoMatch/>}/>
                    {routes}
                </Route>
            </Routes>
        </BrowserRouter>
    )
}

export default App
